<template>
	<view class="container">
		<u--form
				labelPosition="top" labelWidth="auto"
				:model="post"
				ref="postForm"
		>
			<u-form-item>
				<u--input v-model="post.title" placeholder="请输入标题"></u--input>
			</u-form-item>
			
			<u-form-item label="标  签">
				<view class="tag-box">
					<view class="tag-item" v-for="(tagItem, index) in tagList" :key="index">
						<u-tag :text="tagItem.name" :plain="!tagItem.checked" type="success" :name="index"
							@click="checkboxClick">
						</u-tag>
					</view>
				</view>
			</u-form-item>
			
			<u-form-item label="帖子详情">
				<u--textarea v-model="post.content" height="120" maxlength="300" count></u--textarea>
			</u-form-item>
			
			<text>联系信息</text>
			<u-form-item>
				<u--input v-model="post.contact" placeholder="联系人"></u--input>
			</u-form-item>
			<u-form-item>
				<u--input v-model="post.contactPhone" placeholder="联系手机"></u--input>
			</u-form-item>
			
			<text style="color: red;">是否置顶</text>
			<u-form-item>
				<view class="top-fee-box">
					<view class="tag-item" v-for="(topFeeItem, index) in topFeeList" :key="index">
						<u-tag :text="topFeeItem.name + ' ￥' + topFeeItem.fee" :plain="!topFeeItem.checked" type="error" :name="index" size="large"
							@click="checkTopFeeClick">
						</u-tag>
					</view>
				</view>
			</u-form-item>
		</u--form>
		
		<view class="btn-box">
			<u-button type="primary" text="发布" @click="publishPost"></u-button>
			<u-button type="info" text="存草稿" @click="savePost"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			const category = JSON.parse(decodeURIComponent(option.category))
			this.categoryId = category.id
			this.categoryName = category.name
			this.content = '招聘单位\n招聘岗位\n工作地点\n工作时间\n薪资待遇\n'
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '发布'+this.categoryName
			})
		},
		data() {
			return {
				post: {
					categoryId: '',
					categoryName: '',
					title: '', // 标题
					tag: '', // 标签，逗号分隔，如 '包吃;包住;福利好'
					content: '', // 内容
					contact: '', // 联系人
					contactPhone: '', // 联系电话
					effectiveDays: undefined // 作用天数 
				},
				
				tagList: [
					{ name: '标签1', checked: false },
					{ name: '标签2', checked: false },
					{ name: '标签3', checked: false },
					{ name: '标签4', checked: false },
					{ name: '标签5', checked: false },
					{ name: '标签6', checked: false },
				],
				
				topFeeList: [
					{ name: '不置顶', fee: '0', checked: true},
					{ name: '置顶3天', fee: '3', checked: false},
					{ name: '置顶7天', fee: '7', checked: false},
					{ name: '置顶30天', fee: '15', checked: false}
				],
				fee: '0',
			}
		},
		methods: {
			checkboxClick(name) {
				this.tagList[name].checked = !this.tagList[name].checked
			},
			checkTopFeeClick(name) {
				this.topFeeList.map((topFeeItem, index) => {
					topFeeItem.checked = index === name ? true : false
				})
				this.fee = this.topFeeList[name].fee
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}
	
	.tag-box, .top-fee-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.tag-item {
			padding-right: 20rpx;
			padding-bottom: 15rpx;
		}
	}
	
	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15px;
	}
</style>
